const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    //  配置入口文件
    entry: './src/index.js',
    //配置出口文件
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].[hash]main.js',
        clean: true
    },
    //18.   配置html解析器
    // 19.   通过html解析器，指定index.html页面模板
    plugins: [
        new HtmlWebpackPlugin({ template: './src/index.html' }),
        // new MiniCssExtractPlugin()
    ],
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(sass|css|scss)$/i,
                //  配置css解析器
                //  配置sass解析器
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // MiniCssExtractPlugin.loader,
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 30*1024,
                    }
                  },
                ],
               type: 'javascript/auto'
              },
              {
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                     
                    }
                  },
                ],
               
              },











            // {
            //     test: /\.(png|svg|jpg|jpeg|gif)$/i,
            //     use: [
            //         {
            //             loader: 'url-loader',
            //             options: {
            //                 limit: 30 * 1024,
            //             }

            //         }


            //     ],
            //     type: 'javascript/auto',
            // },
            // {
            //     test: /\.(eot|svg|ttf|woff|woff2)$/i,
            //     use: [
            //         {
            //             loader: 'file-loader',
            //             options: {
                            
            //             }

            //         }


            //     ],
                
            // },
        ]

    },
    devServer: {
        host: 'localhost',
        port: 8888,
        open: true,
        hot: true, //  实现浏览器无刷新更新界面
        compress: true
    }
}